<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>coupon</title>
    <link rel="stylesheet" href="../dite/layui/css/layui.css">
    <script src="../dite/layui/layui.js"></script>
    <link href="../css/coupon/coupon.css" rel="stylesheet">
</head>
<body>
<div class="nav">
    <div class="head-logo">
        <a href="" ></a>
    </div>
    <div class="head-nav">
        <ul>
            <li><a href="" class="first-item">首页</a> </li>
            <li><a href="">手机端</a> </li>
            <li><a href="">成为房东</a> </li>
            <li><a href="">房源订单中心</a> </li>
            <li><a href="">个人中心</a> </li>
            <li><a href="">帮助</a> </li>
        </ul>
    </div>
    <div class="head-login">
        <a href="">
            <img class="login-logo" src="../image/login-logo.svg"/>
            <span class="login-title">登录</span>
        </a>
        <a href="">
            <img class="regist-logo" src="../image/regist-logo.svg" >
            <span class="login-title">注册</span>
        </a>

    </div>
</div>
<div class="main">
    <div class="coupon-titel"><label>礼券中心</label></div>
    <div class="main_left">
        <div id="coupon-main" class="layui-tab">
            <ul id="coupon-topic" class="layui-tab-title ">
                <li class="layui-this" id="firstpage">可使用优惠券</li>
                <li id="secondpage">已过期优惠券</li>
                <li id="thirdpage">已使用优惠券</li>
                <li id="fourpage">兑换优惠券</li>

            </ul>
            <div class="layui-tab-content coupon-context">
                <div id="first-item" class="layui-tab-item layui-show">
                    <div id="coupon_one" class="coupon_first">
                        <div class="coupon_top">
                            <div class="coupon_top_left">
                                <span class="coupon_mark">￥</span>
                                <span class="coupon_number">120</span>
                            </div>
                            <div class="coupon_top_center">
                                <span class="coupon_name">新用户专享超值券</span>
                                <span class="coupon_rule">满￥300可用，14天内有效</span>
                                <span class="coupon_symbol">新领取</span>
                            </div>
                            <div class="coupon_date">
                                <span>使用时间为</span>
                                <span>10月3日</span><br/>
                                <span >到</span><br/>
                                <span>10月17日</span>
                            </div>
                            <div class="coupon_top_right">
                                <a href="" class="coupon_use">立即使用</a>
                            </div>
                        </div>
                        <div class="coupon_footer">
                            <span>仅限预订带有「超值券」标签的房源</span>
                        </div>
                    </div>
                    <br/>
                    <div id="coupon_tow" class="coupon_first">
                        <div class="coupon_top">
                            <div class="coupon_top_left">
                                <span class="coupon_mark">￥</span>
                                <span class="coupon_number">120</span>
                            </div>
                            <div class="coupon_top_center">
                                <span class="coupon_name">新用户专享超值券</span>
                                <span class="coupon_rule">满￥300可用，14天内有效</span>
                                <span class="coupon_symbol">新领取</span>
                            </div>
                            <div class="coupon_date">
                                <span>使用时间为</span>
                                <span>10月3日</span><br/>
                                <span >到</span><br/>
                                <span>10月17日</span>
                            </div>
                            <div class="coupon_top_right">
                                <a href="" class="coupon_use">立即使用</a>
                            </div>
                        </div>
                        <div class="coupon_footer">
                            <span>仅限预订带有「超值券」标签的房源</span>
                        </div>
                    </div>
                </div>
                <div id="second-item" class="layui-tab-item">
                    <div id="coupon_three" class="coupon_first">
                        <div class="coupon_top">
                            <div class="coupon_top_left">
                                <span class="coupon_mark">￥</span>
                                <span class="coupon_number">120</span>
                            </div>
                            <div class="coupon_top_center">
                                <span class="coupon_name">新用户专享超值券</span>
                                <span class="coupon_rule">满￥300可用，14天内有效</span>
                                <span class="coupon_symbol">已过期</span>
                            </div>
                            <div class="coupon_date">
                                <span>使用时间为</span>
                                <span>10月3日</span><br/>
                                <span >到</span><br/>
                                <span>10月17日</span>
                            </div>
                            <div class="coupon_top_right">
                                <a href="" class="coupon_use">立即使用</a>
                            </div>
                        </div>
                        <div class="coupon_footer">
                            <span>仅限预订带有「超值券」标签的房源</span>
                        </div>
                    </div>
                    <br/>
                    <div id="coupon_four" class="coupon_first">
                        <div class="coupon_top">
                            <div class="coupon_top_left">
                                <span class="coupon_mark">￥</span>
                                <span class="coupon_number">120</span>
                            </div>
                            <div class="coupon_top_center">
                                <span class="coupon_name">新用户专享超值券</span>
                                <span class="coupon_rule">满￥300可用，14天内有效</span>
                                <span class="coupon_symbol">已过期</span>
                            </div>
                            <div class="coupon_date">
                                <span>使用时间为</span>
                                <span>10月3日</span><br/>
                                <span >到</span><br/>
                                <span>10月17日</span>
                            </div>
                            <div class="coupon_top_right">
                                <a href="" class="coupon_use">立即使用</a>
                            </div>
                        </div>
                        <div class="coupon_footer">
                            <span>仅限预订带有「超值券」标签的房源</span>
                        </div>
                    </div>
                </div>
                <div id="third-item" class="layui-tab-item">
                    <div id="coupon_five" class="coupon_first">
                        <div class="coupon_top">
                            <div class="coupon_top_left">
                                <span class="coupon_mark">￥</span>
                                <span class="coupon_number">120</span>
                            </div>
                            <div class="coupon_top_center">
                                <span class="coupon_name">新用户专享超值券</span>
                                <span class="coupon_rule">满￥300可用，14天内有效</span>
                                <span class="coupon_symbol">已使用</span>
                            </div>
                            <div class="coupon_date">
                                <span>使用时间为</span>
                                <span>10月3日</span><br/>
                                <span >到</span><br/>
                                <span>10月17日</span>
                            </div>
                            <div class="coupon_top_right">
                                <a href="" class="coupon_use">立即使用</a>
                            </div>
                        </div>
                        <div class="coupon_footer">
                            <span>仅限预订带有「超值券」标签的房源</span>
                        </div>
                    </div>
                </div>
                <div id="four-item" class="layui-tab-item">
                    <div id="coupon_six" class="coupon_first">
                        <div class="coupon_top">
                            <div class="coupon_top_left">
                                <span class="coupon_mark">￥</span>
                                <span class="coupon_number">70</span>
                            </div>
                            <div class="coupon_top_center">
                                <span class="coupon_name">积分兑换劵</span>
                                <span class="coupon_rule">满￥700可用，14天内有效</span>
                            </div>
                            <div class="coupon_top_right">
                                <a href="" class="coupon_use">立即兑换</a>
                            </div>
                        </div>
                        <div class="coupon_footer">
                            <span>可预定任何的房源</span>
                        </div>
                    </div>
                    <div id="coupon_seven" class="coupon_first">
                        <div class="coupon_top">
                            <div class="coupon_top_left">
                                <span class="coupon_mark">￥</span>
                                <span class="coupon_number">50</span>
                            </div>
                            <div class="coupon_top_center">
                                <span class="coupon_name">新用户专享超值券</span>
                                <span class="coupon_rule">满￥500可用，14天内有效</span>
                            </div>
                            <div class="coupon_top_right">
                                <a href="" class="coupon_use">立即兑换</a>
                            </div>
                        </div>
                        <div class="coupon_footer">
                            <span>可预定任何的房源</span>
                        </div>
                    </div>
                    <div id="coupon_night" class="coupon_first">
                        <div class="coupon_top">
                            <div class="coupon_top_left">
                                <span class="coupon_mark">￥</span>
                                <span class="coupon_number">40</span>
                            </div>
                            <div class="coupon_top_center">
                                <span class="coupon_name">积分兑换劵</span>
                                <span class="coupon_rule">满￥400可用，14天内有效</span>
                            </div>
                            <div class="coupon_top_right">
                                <a href="" class="coupon_use">立即兑换</a>
                            </div>
                        </div>
                        <div class="coupon_footer">
                            <span>可预定任何的房源</span>
                        </div>
                    </div>
                    <div id="coupon_nine" class="coupon_first">
                        <div class="coupon_top">
                            <div class="coupon_top_left">
                                <span class="coupon_mark">￥</span>
                                <span class="coupon_number">30</span>
                            </div>
                            <div class="coupon_top_center">
                                <span class="coupon_name">积分兑换劵</span>
                                <span class="coupon_rule">满￥300可用，14天内有效</span>
                            </div>
                            <div class="coupon_top_right">
                                <a href="" class="coupon_use">立即使用</a>
                            </div>
                        </div>
                        <div class="coupon_footer">
                            <span>可预定任何的房源</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main_right" >
        <div class="main_right_owe">
            <label>兑换优惠券规则如下</label>
            <ul>
                <li>满￥700 立减￥70，需要积分700</li>
                <li>满￥500 立减￥50，需要积分500</li>
                <li>满￥400 立减￥40，需要积分400</li>
                <li>满￥300 立减￥30，需要积分300</li>
            </ul>
        </div>
        <div class="main_right_tow">
            <label>使用规则</label>
                <p>优惠券满减额度仅适用于房费和清洁费，不适用服务费、税费或其他相关费用。<br/>
                    优惠券不可用于已确认的预订。<br/>
                    优惠券仅限单次预订使用，若订单因为任何原因取消或变更，用户所能得到的最高退款金额只限于实际支付的金额。<br/>
                    若用户取消一笔使用了优惠券的预订，已经使用的优惠券则不再有效。
                </p>
        </div>
    </div>
</div>
</body>
</html>